<template>
  <div class="right">
    <ul class="category">
      <li v-for="item in dishCateList" :key="item.id">
        <div class="icon">
          <span class="iconfont" v-html="item.cate_icon"></span>
          <span class="name">{{item.cate_name}}</span>
        </div>
        <div class="edit">
          <span class="iconfont" @click="del(item.id)">&#xe610;</span>
          <span class="iconfont" @click="dialogFormVisible = true;currentId=item.id;title = '修改分类';ruleForm.name=item.cate_name;ruleForm.icon=item.cate_icon">&#xe64a;</span>
        </div>
      </li>
      <li class="add" @click="resetForm('ruleForm');dialogFormVisible = true;title = '新增分类'"><span class="iconfont">&#xe608;</span></li>
    </ul>
    <!-- 新增和修改分类的组件 -->
    <el-dialog :title="title" :visible.sync="dialogFormVisible" width="35%" top="20vh">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="名称" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="图标" prop="icon">
          <el-input v-model="ruleForm.icon"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetForm('ruleForm')">重 置</el-button>
        <el-button type="primary" @click="submitForm('ruleForm',title)">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { addDishCateAPI, delDishCateAPI, updateDishCateAPI, getDishCateAPI } from '@/api/dishCategoryAPI.js'
export default {
  name: 'categoryManage',
  data () {
    return {
      title: '',
      dialogFormVisible: false,
      avltimer: null,
      dishCateList: [],
      currentId: '',
      ruleForm: {
        name: '',
        icon: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入菜品名称', trigger: 'blur' }
        ],
        icon: [
          { required: true, message: '请输入icon', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    del (id) {
      this.$confirm('此操作将永久删除该分类, 且该分类下的所有菜品都将消失, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.delCate(id)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    addSuccess () {
      this.$message({
        message: '添加成功',
        type: 'success'
      })
    },
    modifySuccess () {
      this.$message({
        message: '修改成功',
        type: 'success'
      })
    },
    submitForm (formName, title) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.dialogFormVisible = false
          if (title === '新增分类') {
            this.addCate()
            this.addSuccess()
          } else if (title === '修改分类') {
            this.updateCate()
            this.modifySuccess()
          }
        } else {
          return false
        }
      })
    },
    resetForm (formName) {
      this.$nextTick(() => {
        this.$refs[formName].resetFields()
      })
    },
    // 增加菜品分类（增）
    async addCate () {
      const token = localStorage.getItem('token')
      const data = {
        cate_name: this.ruleForm.name,
        cate_icon: this.ruleForm.icon
      }
      const { data: res } = await addDishCateAPI(token, data)
      console.log(res)
    },
    // 删除菜品分类（删）
    async delCate (i) {
      this.dialogVisible = false
      const token = localStorage.getItem('token')
      const data = {
        id: i
      }
      const { data: res } = await delDishCateAPI(token, data)
      console.log(res)
    },
    // 更新菜品分类（改）
    async updateCate () {
      const token = localStorage.getItem('token')
      const data = {
        id: this.currentId,
        cate_name: this.ruleForm.name,
        cate_icon: this.ruleForm.icon
      }
      const { data: res } = await updateDishCateAPI(token, data)
      console.log(res)
    },
    // 获取菜品分类列表（查）
    async getDishCate () {
      const token = localStorage.getItem('token')
      const { data: res } = await getDishCateAPI(token)
      this.dishCateList = res.data
    }
  },
  created () {
    this.avltimer = setInterval(() => {
      this.getDishCate()
    }, 50)
  },
  beforeDestroy () {
    clearInterval(this.avltimer)
    this.avltimer = null
  }
}
</script>

<style scoped>
.category{
    overflow: hidden;   /*清除浮动**/
}
.category li{
    width: 300px;
    height: 300px;
    float: left;
    margin: 0 10px 20px;
    border-radius: 5px;

    background: #fff;
    border: 1px solid #ccc;

    position: relative;
}
.category li div{
    width: 100%;
    height: 100%;
    position: absolute;
    display: flex;
    align-items: center;
}
.icon{
    justify-content: center;
    flex-direction: column;
}
.icon .iconfont{
    font-size: 150px;
    margin-bottom: 20px;
    color: #ff8400;
}
.icon .name{
    font-size: 30px;
    color: #aaa;
}

.edit{
    justify-content: space-around;  /* 分散居中对齐 */
    background: rgba(0, 0, 0, .9);
    opacity: 0;
}
.edit span{
    color: #dbdbdb;
    font-size: 80px;
    cursor: pointer;
}
.edit span:hover{
    color: #ff8400;
}
.category li:hover .edit{
    opacity: 1;
    transition: .4s;
}

.add{
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.add span{
    font-size: 200px;
    color: #ccc;
}
.add:hover{
    background: #eee;
    transition: .3s;
}
</style>
